<template>
	<view id="wrap">
		<!-- 系统消息 -->
		<u-divider text="红点"></u-divider>
		<!-- <view class="system" @click="_to('/pages/news/pages/system')"> -->
		<view class="system">
			<view class="system-b df aic">
				<view class="system-l">
					<image src="/static/common/home-bg.png" mode=""></image>
					<view class="red" v-if="NoRead"></view>
				</view>
				<view class="system-r">
					<view class="system-r-t dis-spb">
						<view class="system-r-t-l">
							系统消息
						</view>
						<view class="system-r-t-r" v-if="noticeList.length">
							{{noticeList[0].createTime}}
						</view>
					</view>
					<view class="u-line-1 system-r-f"  v-if="noticeList.length">
				       {{noticeList[0].title}}
					</view>
				</view>
			</view>
		</view>
		<u-divider text="列表"></u-divider>
		<!-- <c-scroll-list ref="list" :api="getList" :apiParams="apiParams" :option="option" @load="(res)=>(list=res)">
		
		</c-scroll-list> -->
		
		<!-- 替换 list.list -->
		<view class="item" v-for="(item,i) in list" :key='i' :class="item.readFlag?'':'active'" @click="$fn.c_jumoPage('/pages/example/pages/systemDetail?id='+item.id)">
			<view class="u-line-1 title">
				{{item.title}}
			</view>
			<view class="item-f dis_sb">
				<view class="">
					{{item.createTime}}
				</view>
				<view class="item-f-r">
					{{item.readFlag?'已读':'未读'}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				pageNum:1,
				pageSize:10,
				list:[{
					id:1,
					title:'标题',
					readFlag: 1,
					createTime:'时间',
				},{
					id:2,
					title:'标题2',
					readFlag: 0,
					createTime:'时间2',
				}],
				bool:false,
				delShow:false,
				options: [{
					text: '',
					style: {
						backgroundColor: '#F5F5F5'
					}
				}],
				index:'',
				noticeList:[],
				NoRead:true,
			}
		},
		onReachBottom() {
			if (this.bool) {
				this.pageNum += 1
				this.getList()
			}
		},
		methods:{
			// 系统消息未读
			getnoticeNoRead(){
				const token = uni.getStorageSync('token');
				if (token) {
				this.$u.api.noticeNoRead().then(res=>{
					this.NoRead=res.data
				})
				}
			},
			// 未读消息
			getMessages(){
				const token = uni.getStorageSync('token');
				if (token) {
				this.$u.api.messagesTotal().then(res=>{
					if(res.data){
						uni.setTabBarBadge({
						  index: 1,
						  text:String(res.data)
						})
						
					}else{
						uni.removeTabBarBadge({
							index: 1,
						})
					}
					
				})
				}
			},
			click(e){
				console.log(e)
				this.index=e
				this.delShow=true
				
			},
			// 系统信息
			getNotice() {
				const token = uni.getStorageSync('token');
				if (token) {
				this.$u.api.notice({
					pageNum: 1,
					pageSize: 10,
				}).then(res => {
					this.noticeList=res.data.list
				})}
			},
			delBtn(){
				this.$u.api.deleteLog({
					id:this.list[this.index].roomId,
					type:'3'
				}).then(res=>{
					uni.showToast({ title:'删除成功', icon: 'none' })
					this.delShow=false
					this.pageNum = 1
					this.list=[]
					this.getList()
					this.getMessages()
				})
			},
			getList(){
				const token = uni.getStorageSync('token');
				if (token) {
				this.$u.api.myChatList({
					pageNum:this.pageNum,
					pageSize:this.pageSize,
				}).then(res => {
					
					if(this.pageNum==1){
						this.list=res.data.list
					}else{
						this.list.push(...res.data.list)
					}
					if (this.list.length < res.data.total) {
						this.bool = true
					} else {
						this.bool = false
					}
				})}
			}
		},
		onPullDownRefresh() {
			this.pageNum = 1
			this.list=[]
			this.getList()
			this.getMessages()
			this.getnoticeNoRead()
		
			setTimeout(() => {
					
				uni.stopPullDownRefresh();
			}, 1000);
		},
	
		onLoad(options){
			// this.getNotice()
			this.pageNum = 1
			// this.list=[]
			// this.getList()
			// this.getMessages()
			// this.getnoticeNoRead()
		},
		onShow(){
			// this.getMessages()
			// this.getnoticeNoRead()
			// this.getList()
			// setInterval(()=>{
			// 	this.getMessages()
			// 	this.getnoticeNoRead()
			// 	this.getList()
			// },5000)
		}
	}
</script>

<style lang="scss" scoped>
	#wrap {
		padding: 30rpx;
		// min-height: 100vh;
		// background-color: #F5F5F5;
		.system {
			position: relative;
			z-index: 1;
			padding: 0 30rpx;
			background-color: #FFFFFF;
			.system-b {
				padding: 24rpx 0;
				// border-bottom: 1rpx solid #E6E6E6;
			}
		
			.system-l {
				margin-right: 24rpx;
				position: relative;
		
				image {
					width: 100rpx;
					height: 100rpx;
				}
				.red{
					width: 20rpx;
					height: 20rpx;
					background-color: #FF4D4D;
					border-radius: 20rpx;
					position: absolute;
					top: 0;
					right: 10rpx;
				}
			}
		
			.system-r {
				width: 550rpx;
		
				.system-r-t {
					
					.system-r-t-l {
						color: #1A1A1A;
						font-size: 28rpx;
						font-weight: 700;
					
						
					}
		
					.system-r-t-r {
						
						color: #999999;
						font-size: 24rpx;
						font-weight: 500;
					}
				}
		
				.system-r-f {
					margin-top: 20rpx;
					color: #666;
					font-size: 24rpx;
					font-weight: 500;
				}
			}
		}


		.main {
			padding: 0 30rpx;

			.item {
				.system-b {
					padding: 24rpx 0;
					border-bottom: 1rpx solid #E6E6E6;


					.system-l {
						margin-right: 24rpx;
						position: relative;
						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 100rpx;
						}
						.num{
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: #FF4D4D;
							color: #FFFFFF;
							font-size: 16rpx;
							font-weight: 500;
							position: absolute;
							top: 0;
							right: 0;
							padding: 4rpx;
							border-radius: 30rpx;
							width: 24rpx;
							height: 24rpx;
						}
					}

					.system-r {
						width: 550rpx;

						.system-r-t {
							.system-r-t-l {
								color: #1A1A1A;
								font-size: 32rpx;
								font-weight: 700;
								image{
									width: 36rpx;
									height: 24rpx;
									margin-left: 20rpx;
								}
							}

							.system-r-t-r {
								color: #999999;
								font-size: 24rpx;
								font-weight: 500;
							}
						}

						.system-r-f {
							margin-top: 20rpx;
							color: #666;
							font-size: 24rpx;
							font-weight: 500;
						}
					}
				}
			}
		}
        .popu{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 600rpx;
			padding: 40rpx 48rpx;
			.popu-title{
				color: #1A1A1A;
				font-size: 36rpx;
				font-weight: 700;
				position: relative;
				&:before {
					content: '';
					width: 144rpx;
					height: 20rpx;
					background: rgba(102,163,255,0.4);;
					position: absolute;
					bottom: 0;
					left: 0;
				}
			}
			.popu-desc{
				color: #333333;
				font-size: 28rpx;
				font-weight: 500;
				margin: 40rpx 0 60rpx;
			}
			.popu-btn{
				width: 100%;
				view{
					width: 240rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					border-radius: 16rpx;
					border: 1rpx solid #66A3FF;
					color: #66A3FF;
					font-size: 36rpx;
					font-weight: 700;
				}
				.active{
					color: #fff;
					background-color: #66A3FF;
				}
			}
		}
		.notList {
			padding: 100rpx;
			width: 750rpx;
			font-size: 32rpx;
			font-weight: 500;
			display: flex;
			flex-direction: column;
			align-items: center;
		
			.notList_bg {
				width: 480rpx;
				height: 352rpx;
		
			}
		
			.notList_1 {
				color: #808080;
		
				text-align: center;
		
			}
		
			.notList_2 {
				color: #458FFF;
				margin-top: 60rpx;
		
			}
		
			.notList_3 {
				width: 240rpx;
				height: 80rpx;
				background: #66A3FF;
				border-radius: 40rpx;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 36rpx;
				margin-top: 40rpx;
			}
		}
		    .item{
				padding: 28rpx 0;
				color: #999;
				border-bottom: 1rpx solid #DCDFE2;
				.title{
					font-size: 32rpx;
				}
				.item-f{
					margin-top: 16rpx;
					font-size: 24rpx;
				}
			}
			.active{
				.title{
					color: #1A1A1A;
					font-weight: 500;
				}
				.item-f-r{
					color: #1A1A1A;
					font-weight: 700;
				}
			}
	}
</style>